import React, { Component } from "react";
import { getService } from "../../http/api-p";
import styles from "./service.module.scss";
import { withRouter } from "react-router-dom";

class service extends Component {
  // 请求数据
  constructor(props) {
    super(props);
    this.state = {
      //   issue: [],
      //   answer: [],
      all: [],
      isLoaded: false,
    };
  }

  async componentDidMount() {
    //先存一下this，以防使用箭头函数this会指向我们不希望它所指向的对象。
    // const _this = this;
    let res = await getService();

    let arr = [];
    for (let i in res) {
      arr.push(res[i]);
    }
    arr.splice(12,)
    arr.reverse();
    // let arr1 = [];
    // for (let a1 = 0; a1 <= arr.length; a1 += 2) {
    //   arr1.push(arr[a1]);
    // }
    // let arr2 = [];
    // for (let a1 = 1; a1 <= arr.length; a1 += 2) {
    //   arr2.push(arr[a1]);
    // }

    this.setState({
      //   issue: arr1,
      //   answer: arr2,
      all: arr,
      isLoaded: true,
    });
    // console.log(arr);
    // console.log(arr1);
    // console.log(arr2);
  }

  // 路由跳转
  handleBackClick = (params) => {
    this.props.history.push("about");
  };
  render() {
    return (
      <div className={styles.service}>
        {/* ServiceHeader start 头部*/}
        <div className={styles.serviceHeader}>
          <span onClick={this.handleBackClick}>&lt;</span>
          <p className={styles.serviceHeaderTitle}>服务中心</p>
        </div>
        {/* ServiceHeader end */}
        {this.state.all.map((item, key) => {
          return (
            <div className={styles.servItem}>
              <div
                key={this.state.all.index}
                className={
                  styles.servItemi +
                  " " +
                  (key % 2 !== 0 ? styles.servItema : styles.servItemii)
                }
              >
                {item}
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

export default withRouter(service);
